﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery EasyUI Extensions - Examples,jQuery,EasyUI,插件,扩展,datagrid,tree,treegrid,panel,tabs,form,validatebox,menu,linkbutton,combo,window,dialog</title>
    <meta name="keywords" content="jquery,easyui,datagrid,tree,treegrid,messager,menu,panel,tabs,layout,window,dialog,form,validatebox,linkbutton,combo,jqext,jquery-extensions,plugin,扩展,插件" />
    <meta name="description" content="jquery-extensions,基于jQuery和EasyUI的丰富插件扩展功能集合,提供包含jEasyUI中诸多插件如 panel、tabs、layout、menu、linkbutton、menu、form、validatebox、combo、window、dialog、datagrid、tree、treegrid 等的扩展功能集合。" />

    <link href="../jquery-easyui-theme/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="../jquery-easyui-theme/icon.css" rel="stylesheet" type="text/css" />
    <script src="../jquery/jquery-1.11.1.js" type="text/javascript"></script>
    <script src="../jquery-easyui-1.3.6/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="../jquery-easyui-1.3.6/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>

    <script src="../jquery.jdirk.js" type="text/javascript"></script>
    <link href="../jeasyui-extensions/jeasyui.extensions.css" rel="stylesheet" type="text/css" />

    <script src="../jeasyui-extensions/jeasyui.extensions.js" type="text/javascript"></script>
    <script src="../jeasyui-extensions/jeasyui.extensions.progressbar.js"></script>
    <script src="../jeasyui-extensions/jeasyui.extensions.linkbutton.js" type="text/javascript"></script>
    <script src="../jeasyui-extensions/jeasyui.extensions.form.js" type="text/javascript"></script>
    <script src="../jeasyui-extensions/jeasyui.extensions.validatebox.js" type="text/javascript"></script>
    <script src="../jeasyui-extensions/jeasyui.extensions.combo.js" type="text/javascript"></script>
    <script src="../jeasyui-extensions/jeasyui.extensions.combobox.js" type="text/javascript"></script>
    <script src="../jeasyui-extensions/jeasyui.extensions.menu.js" type="text/javascript"></script>
    <script src="../jeasyui-extensions/jeasyui.extensions.searchbox.js" type="text/javascript"></script>
    <script src="../jeasyui-extensions/jeasyui.extensions.panel.js" type="text/javascript"></script>
    <script src="../jeasyui-extensions/jeasyui.extensions.window.js" type="text/javascript"></script>
    <script src="../jeasyui-extensions/jeasyui.extensions.dialog.js" type="text/javascript"></script>
    <script src="../jeasyui-extensions/jeasyui.extensions.layout.js" type="text/javascript"></script>
    <script src="../jeasyui-extensions/jeasyui.extensions.tree.js" type="text/javascript"></script>
    <script src="../jeasyui-extensions/jeasyui.extensions.datagrid.js" type="text/javascript"></script>
    <script src="../jeasyui-extensions/jeasyui.extensions.treegrid.js" type="text/javascript"></script>
    <script src="../jeasyui-extensions/jeasyui.extensions.combogrid.js" type="text/javascript"></script>
    <script src="../jeasyui-extensions/jeasyui.extensions.combotree.js" type="text/javascript"></script>
    <script src="../jeasyui-extensions/jeasyui.extensions.tabs.js" type="text/javascript"></script>
    <script src="../jeasyui-extensions/jeasyui.extensions.theme.js" type="text/javascript"></script>

    <link href="../icons/icon-all.css" rel="stylesheet" type="text/css" />
    <script src="../icons/jeasyui.icons.all.js" type="text/javascript"></script>
    <script src="../jeasyui-extensions/jeasyui.extensions.icons.js" type="text/javascript"></script>
    <script src="../jeasyui-extensions/jeasyui.extensions.gridselector.js" type="text/javascript"></script>

    <link href="../plugins/uploadify/uploadify.css" rel="stylesheet" />
    <script src="../plugins/uploadify/jquery.uploadify.min.js"></script>

    <script src="../jeasyui-extensions/jquery.toolbar.js" type="text/javascript"></script>
    <script src="../jeasyui-extensions/jquery.comboicons.js" type="text/javascript"></script>
    <script src="../jeasyui-extensions/jquery.comboselector.js" type="text/javascript"></script>
    <script src="../jeasyui-extensions/jquery.portal.js" type="text/javascript"></script>
    <script src="../jeasyui-extensions/jquery.euploadify.js"></script>

    <style type="text/css">
        div.uploadify {
            display: inline-block;
            font-size: 12px;
            margin: 0;
        }

        div.uploadify .uploadify-button {
            border-radius: 0;
            margin: 0 4px 0 10px;
        }


        div.uploadify > object {
            left: 0px;
        }

        div#p {
            display: inline-block;
        }

        .progressbar-value .progressbar-text.progressbar-text-success {
            background-color: #15C23C;
        }

        .progressbar-value .progressbar-text.progressbar-text-error {
            background-color: #F10257;
        }
    </style>
    <!--[if lt IE 8]>
    <style type="text/css">
        div#p {
            display: inline;
            margin-right: 0px;
        }
    </style>
    <![endif]-->

    <script type="text/javascript">
        $(function () {

            var lastId = null, multi = false, uploadId = "btn1", queueID = "queue";

            function getQueues() {
                var data = $("#" + uploadId).data("uploadify"), ret = [],
                    files = (data && data.queueData && data.queueData.files) ? data.queueData.files : [];
                for (var i in files) {
                    ret.push(files[i]);
                }
                return ret;
            };
            function getFileName(file) {
                if (!file || !file.name) { return "未选择文件"; }
                return $.string.getByteLen(file.name) > 28 ? $.string.leftBytes(file.name, 25) + "..." : file.name;
            };

            $("#" + uploadId).uploadify({
                swf: "../plugins/uploadify/uploadify.swf",
                uploader: "../plugins/uploadify/net/uploadify.ashx",
                //fileSizeLimit: "4096MB",
                successTimeout: 3600,
                formData: { folder: "uploads" },
                buttonText: "选择文件",
                removeTimeout: 0,
                width: 76, height: 24,
                auto: false,
                multi: multi,
                onSelect: function (file) {
                    //$.easyui.showOption(file);
                    if (lastId && !multi) {
                        $("#" + uploadId).uploadify("cancel", lastId);
                    }
                    if (file) {
                        $("#p").progressbar("setText", getFileName(file) + "(" + $.number.toFileSize(file.size) + ") - 0%").progressbar("setValue", 0).find(".progressbar-value .progressbar-text").removeClass("progressbar-text-success");
                        lastId = file.id;
                    } else {
                        $("#p").progressbar("setText", "未选择文件").progressbar("setValue", 0).find(".progressbar-value .progressbar-text").removeClass("progressbar-text-success");
                    }
                },
                queueID: queueID,
                onCancel: function (file) {
                    var queues = getQueues();
                    if (!queues.length) {
                        return $("#p").progressbar("setText", "未选择文件").progressbar("setValue", 0);
                    }
                    var temps = $.array.clone(queues);
                    var array = $.array.remove(temps, file, function (a, b) {
                        return a.id == b.id;
                    });
                    if (array.length) {
                        return $("#p").progressbar("setText", getFileName(array[0]) + "(" + $.number.toFileSize(file.size) + ") - 0%").progressbar("setValue", 0);
                    } else {
                        return $("#p").progressbar("setText", "未选择文件").progressbar("setValue", 0);
                    }
                },
                //onInit: function () {
                //    alert("init");
                //},
                //onFallback: function () {
                //    alert("fallback");
                //}
                onUploadProgress: function (file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {
                    var val = !bytesTotal ? 0 : (bytesUploaded / bytesTotal * 100).round(2);
                    $("#p").progressbar("setValue", val).find(".progressbar-value .progressbar-text").removeClass("progressbar-text-success progressbar-text-error");
                    $("#p").progressbar("setText", getFileName(file) + "(" + $.number.toFileSize(file.size) + ") - " + val + "%");
                },
                onUploadSuccess: function (file, data, response) {
                    $("#p").progressbar("setText", getFileName(file) + "(上传完成!)").find(".progressbar-value .progressbar-text").removeClass("progressbar-text-success progressbar-text-error").addClass("progressbar-text-success");
                },
                onUploadError: function (file, errorCode, errorMsg, errorString) {
                    $("#p").progressbar("setText", getFileName(file) + "(上传失败:" + errorString + ")").find(".progressbar-value .progressbar-text").removeClass("progressbar-text-success progressbar-text-error").addClass("progressbar-text-error");
                },
                onUploadComplete: function (file) {
                    //if (errorString == "Cancelled" || errorString == "Stopped") { return; }
                    $("#p").progressbar("setValue", 100);
                }
            });

            $("#btn2").click(function () {
                $("#" + uploadId).uploadify("cancel", "*");
            });

            $("#btn3").click(function () {
                $("#" + uploadId).uploadify("upload");
            });

            $("#btn4").click(function () {
                $("#" + uploadId).uploadify("upload", "*");
            });

            $("#btn5").click(function () {
                $("#" + uploadId).uploadify("stop");
            });

            $("#btn6").click(function () {
                $("#" + uploadId).uploadify("disable", true);
            });
        });
    </script>
</head>
<body>
    <div style="width: 580px;">

        <div id="p" class="easyui-progressbar" data-options="height: 18, width: 400, value: 0, text: '未选择文件'" style="vertical-align: middle;"></div>

        <a class="l-btn l-btn-small l-btn-plain l-btn-disabled l-btn-plain-disabled">
            <span class="l-btn-left l-btn-icon-left">
                <input id="btn1" type="button" />
                <span class="l-btn-icon icon-metro-search">&nbsp;</span>
            </span>
        </a>

        <a id="btn2" class="easyui-linkbutton" data-options="plain: true, iconCls: 'icon-metro-cancel-circle'">取消上传</a>

    </div>

    <a id="btn3" class="easyui-linkbutton" data-options="plain: true, iconCls: 'icon-metro-upload3'">开始上传</a>
    <a id="btn4" class="easyui-linkbutton" data-options="plain: true, iconCls: 'icon-metro-upload2'">全部上传</a>
    <a id="btn5" class="easyui-linkbutton" data-options="plain: true, iconCls: 'icon-metro-stop'">停止上传</a>
    <a id="btn6" class="easyui-linkbutton" data-options="plain: true, iconCls: 'icon-metro-stop'">disable</a>

    <div id="queue" style=""></div>
</body>
</html>
